<template>
  <div>
    <h2>homeCounter: {{ homeCounter }}</h2>
    <h2>{{ $store.state.user.userCounter }}</h2>
    <h2>{{ $store.state.rootCounter }}</h2>

    <hr />

    <h2>doubleHomeCounter: {{ doubleHomeCounter }}</h2>
    <button @click="increment">home+1 mutations</button>
    <button @click="incrementAction">home+1 actions</button>

    <hr />

    <h2>{{ $store.getters["pengfan/realAge"] }}</h2>
    <h2>{{ $store.state.pengfan.name }}</h2>
    <h2>{{ $store.state.pengfan.height.toFixed(2) }}</h2>
    <button @click="changeName">改变名字</button>
    <button @click="changeHeight">改变身高</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

// import {mapState,mapGetters, mapMutations, mapActions } from "vuex";
import { useState, useGetters } from "../hooks/index";
const { mapState, mapGetters, mapMutations, mapActions } =
  createNamespacedHelpers("home");
export default {
  computed: {
    // 1.写法一：
    // ...mapState({
    //   homeCounter: (state) => state.home.homeCounter,
    // }),
    // ...mapGetters({
    //   doubleHomeCounter: "home/doubleHomeCounter",
    // }),
    // 2.写法二
    // ...mapState("home", ["homeCounter"]),
    // ...mapGetters("home", ["doubleHomeCounter"]),
    // 3.写法三
    // ...mapState(["homeCounter"]),
    // ...mapGetters(["doubleHomeCounter"]),
  },
  methods: {
    // homeIncrement() {
    //   this.$store.commit("home/increment");
    // },
    // homeIncrementAction() {
    //   this.$store.dispatch("home/incrementAction");
    // },
    changeName() {
      this.$store.commit("pengfan/changeName", "pengyutong");
    },
    changeHeight() {
      this.$store.dispatch("pengfan/changeHeightAction", 0.01);
    },
    // 写法一：
    // ...mapMutations({
    //   increment: "home/increment",
    // }),
    // ...mapActions({
    //   incrementAction: "home/incrementAction",
    // }),

    // 写法二
    // ...mapMutations("home", ["increment"]),
    // ...mapActions("home", ["incrementAction"]),

    //写法三
    // ...mapMutations(["increment"]),
    // ...mapActions(["incrementAction"]),
  },
  setup() {
    const state = useState("home", ["homeCounter"]);
    const getters = useGetters("home", ["doubleHomeCounter"]);

    const mutations = mapMutations(["increment"]);
    const actions = mapActions(["incrementAction"]);

    return {
      ...state,
      ...getters,
      ...mutations,
      ...actions,
    };
  },
};
</script>

<style scoped></style>
